import React from 'react';
import {inject, observer} from 'mobx-react';
import {WeaSelect, WeaPopoverHrm,WeaLocaleProvider} from 'ecCom';
import ViewWeekMonth from '../../../public/viewweekmonth/ViewWeekMonth';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
@inject ('planReportViewStore')
@observer
export default class DateSelectArea extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      monthWeekSelectComDisplayKey: '',
      locationkey: new Date ().getTime (),
    };
    this.store = this.props.planReportViewStore;
  }

  componentWillMount () {
    let {planReportViewStore} = this.props;
    planReportViewStore.getYearSelectoption ();
    this.store.locationkey = new Date ().getTime ();
  }

  getYearSelect = () => {
    let {planReportViewStore} = this.props;
    let {dateSelect, tabSelectKey} = planReportViewStore;
    return (
      <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@iuek57`}
        options={toJS (planReportViewStore.yearDatas)}
        value={dateSelect.year}
        viewAttr={2}
        style={{width: 80, marginRight: 10}}
        onChange={e => {
          this.onYearSelectChange (e);
        }}
      />
    );
  };

  onYearSelectChange = e => {
    let {planReportViewStore} = this.props;
    planReportViewStore.onDateChange ('year', e);
    this.setState ({locationkey: new Date ().getTime ()});
  };

  dateSelectCallBack = val => {
    let {planReportViewStore} = this.props;
    let {tabSelectKey} = planReportViewStore;
    let d = tabSelectKey == '1' ? 'month' : 'week';
    planReportViewStore.onDateChange (d, val);
    this.setState ({locationkey: new Date ().getTime ()});
    this.store.monthWeekSelectComDisplayKey = '';
  };

  getStatusTag = (planstatus = 0, planstatusname) => {
    let backgroundColor = '';
    switch (planstatus) {
      case '0': //草稿
        backgroundColor = '#EB9B53';
        break;
      case '1': //审批
        backgroundColor = '#5388EB';
        break;
      case '2': //退回
        backgroundColor = '#B916E8';
        break;
      case '3': //完成
        backgroundColor = '#49D732';
        break;
      case '6': //过期
        backgroundColor = '#5F0E03';
        break;
      default:
        backgroundColor = '#EB9B53';
        break;
    }

    return (
      <div className="status-tag" style={{backgroundColor: backgroundColor}}>
        {planstatusname}
      </div>
    );
  };

  getNameALink = (resourceid, resourcename) => {
    let href = 'javaScript:openhrm(' + resourceid + ');';
    return (
      <a href={href} onClick={e => window.pointerXY (e)} class="autoWrap">
        {resourcename}
      </a>
    );
  };
  onViewDateChange=(totalWeek)=>{
    const {tabSelectKey} = this.store
    const {year,month,week} =this.store.dateSelect
    if(tabSelectKey=='2'){
      if(week > totalWeek){
        this.store.onDateChange ('week', totalWeek);
      }
    }
  }
  render () {
    let {
      dateSelect,
      tabSelectKey,
      resData,
      noDataMessage,
      locationkey,
      monthWeekSelectComDisplayKey,
      
    } = this.store;
    resData = toJS (resData);
    let {
      enddate,
      planstatus,
      planstatusname,
      resourcename,
      resourceid,
      auditList,
    } = resData;
    dateSelect = toJS (dateSelect);

    const nameLink = this.getNameALink (
      noDataMessage ? this.store.resourceid : resourceid,
      noDataMessage ? this.store.resourcename : resourcename
    )
    return (
      <div className="date-select-area">
        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@7tmqqj`} />
        {this.getYearSelect ()}
        {/* {tabSelectKey == '1' && */}
          <ViewWeekMonth ecId={`${this && this.props && this.props.ecId || ''}_ViewWeekMonth@jber4b`}
            className="week-month-com"
            display={monthWeekSelectComDisplayKey}
            locationkey={locationkey}
            year={parseInt (dateSelect.year)}
            isMonth={tabSelectKey=="1"}
            doClose={this.dateSelectCallBack}
            currentValue={tabSelectKey=='1'? parseInt (dateSelect.month):parseInt (dateSelect.week)}
            isshowdate={tabSelectKey != '1'}
            onDateChange={this.onViewDateChange}
          />
          
        <div style={{display: 'inline'}}>

          <div className="name-title">
            {nameLink?nameLink :''}
            {(!resourcename && !this.store.resourcename )?"":" "+ getLabel('509008',' 的工作计划报告')}
            
          </div>
        </div>
        {noDataMessage != '' || planstatus == ''
          ? (planstatus == '3'?'':<div  className="tag-area"><div className="right-area">{getLabel('22326','截止时间：')+": " + enddate}</div> </div>)
          : <div className="tag-area">
              <div className="right-area">
                {' '}
                {this.getStatusTag (planstatus, planstatusname)}
                { 
                  auditList && auditList.length>0 &&<span>
                    {getLabel('129864', '待审批人')+":"}
                    {auditList.map(a=>{
                      return <span style={{marginRight:"3px"}}>{this.getNameALink(a.id,a.name)}</span>
                    })}
                    {' '}
                  </span>

                }
                {getLabel('22326','截止时间：') +": "}
                {enddate}
              </div>
            </div>}

      </div>
    );
  }
}
